/**
 * 放大镜
 * @author Thousand-paper-crane
 * @param {Object} el
 * @param {String}evt
 * @param {String} eletObj
 * @param {String}styleObj
 * @param {Number}x
 * @param {Number}y
 * @returns undefined
 */
class Search{
    constructor(el){
        this.el=document.querySelector(el)
        // this.divObj=this.el.querySelector('.img')
        this.imgObj=this.el.querySelector('.img img')
        this.maskObj=this.el.querySelector('.img .mask')
        this.enlargeObj=this.el.querySelector('.enlarge')
        this.smallImgs = this.el.querySelectorAll('ul li')
        console.log();
        this.init(this.el)
    }
    init(){
        this.imgover()
        this.enlargesize()
        this.imgMove()
        this.smallImgChange()
    }
    smallImgChange(){
        this.smallImgs.forEach((item, index) => {
            item.onclick = () => {
                this.smallImgs.forEach((item2, index2) => {
                        item2.className = ''
                    }) 
                    this.smallImgs[index].className = 'active'
                    let imgName = item.getAttribute('imgName')
                    this.imgObj.src = `./imgs/${imgName}.jpg`
                    this.enlargeObj.style.background = `url(./imgs/${imgName}.big.jpg) no-repeat`
                }
             })
         }
    imgover(){
        this.imgObj.onmouseover=()=>{
            this.maskObj.style.display=this.enlargeObj.style.display='block'
        } 
        this.imgObj.onmouseout=()=>{
            this.maskObj.style.display=this.enlargeObj.style.display='none'
        }
    }
    enlargesize(){
        let maskW=parseInt(this.getStyle(this.maskObj,'width'))
        let maskH=parseInt(this.getStyle(this.maskObj,'height'))
        let imgW=parseInt(this.getStyle(this.imgObj,'width'))
        let imgH=parseInt(this.getStyle(this.imgObj,'height'))
        let temp=this.getStyle(this.enlargeObj,'background-size')
        let enlargeImgW=parseInt(temp.split(' ')[0])
        let enlargeImgH=parseInt(temp.split(' ')[1])
        this.enlargeObj.style.width=maskW*enlargeImgW/imgW+'px'
        this.enlargeObj.style.height=maskH*enlargeImgH/imgH+'px'
    }
    imgMove(){
        this.imgObj.onmousemove=(evt)=>{
            let e = evt || window.event
            let left=e.pageX-this.el.offsetLeft-this.maskObj.offsetWidth/2
            let top=e.pageY-this.el.offsetTop-this.maskObj.offsetHeight/2
            if(left<0){
                left=0
            }
            if(top<0){
                top=0
            }
            let maxLeft=this.imgObj.offsetWidth-this.maskObj.offsetWidth
            let maxTop=this.imgObj.offsetHeight-this.maskObj.offsetHeight
            if(left>maxLeft){
                left=maxLeft
            }
            if(top>maxTop){
                top=maxTop
            }
            this.maskObj.style.left=left+'px'
            this.maskObj.style.top=top+'px'
            this.enlargeMove(left,top)
        }
    }
    enlargeMove(x,y){
        let maskW=parseInt(this.getStyle(this.maskObj,'width'))
        let maskH=parseInt(this.getStyle(this.maskObj,'height'))
        let enlargeW=parseInt(this.enlargeObj.style.width)
        let enlargeH=parseInt(this.enlargeObj.style.height)
        let maskL=parseInt(this.maskObj.style.left)
        let maskT=parseInt(this.maskObj.style.top)
        x=maskL*enlargeW/maskW
        y=maskT*enlargeH/maskH
        this.enlargeObj.style.backgroundPosition=`-${x}px -${y}px`
    }
    getStyle(eletObj,styleObj){
        if(window.getComputedStyle){
            return window.getComputedStyle(eletObj)[styleObj]
        }else{
            return eletObj.currentStyle[styleObj]
        }
    }

}



let obj1=new Search('.box1')
let obj2=new Search('.box2')